<template>
  <v-chart :option="option"></v-chart>
</template>

<script setup>
import { ref, onMounted } from "vue";
import "echarts-wordcloud";
import { getKeywordsData } from "@/api/index";

const option = ref({});

const renderChart = (data) => {
  option.value = {
    tooltip: {},
    series: {
      type: "wordCloud",
      // 要求数据结构[{name: '词1', value: 100}, {name: '词2', value: 100},...]
      data: data,
      width: "100%",
      height: "100%",
      textStyle: {
        color() {
          // 生成随机颜色
          return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
            Math.random() * 255
          })`;
        },
      },
      // 强调高亮效果
      emphasis: {
        focus: "self",
        textStyle: {
          textShadowBlur: 5,
          textShadowColor: "#333",
        },
      },
    },
  };
};

onMounted(async () => {
  const res = await getKeywordsData();
  // console.log(res)
  const data = res.map((item) => {
    return {
      name: item.keyWord,
      value: item.totalSearch,
    };
  });
  renderChart(data);
});
</script>

<style scoped></style>
